<template>
    <view class="login-container">
        <!-- 背景装饰 -->
        <view class="background-decorations">
            <view class="decoration-circle circle-1"></view>
            <view class="decoration-circle circle-2"></view>
            <view class="decoration-circle circle-3"></view>
        </view>

        <!-- 登录卡片 -->
        <view class="login-card">
            <!-- Logo区域 -->
            <view class="logo-section">
                <image class="logo" src="/static/logo1.png" mode="aspectFit"></image>
                <text class="welcome-text">欢迎登录</text>
            </view>

            <!-- 登录方式切换 -->
            <view class="tab-section">
                <view @click="tab(0)" class="tab-item" :class="tabIndex == 0 ? 'tab-active' : ''">
                    <text class="tab-text">账号登录</text>
                    <view class="tab-indicator" v-if="tabIndex == 0"></view>
                </view>
                <view @click="tab(1)" class="tab-item" :class="tabIndex == 1 ? 'tab-active' : ''">
                    <text class="tab-text">手机登录</text>
                    <view class="tab-indicator" v-if="tabIndex == 1"></view>
                </view>
            </view>

            <!-- 表单区域 -->
            <view class="form-section">
                <!-- 账号密码登录 -->
                <view class="form-content" v-if="tabIndex == 0">
                    <view class="input-group">
                        <view class="input-item">
                            <image class="input-icon" src="/static/images/icon_user.png" mode="aspectFit"></image>
                            <input class="input-field" type="text" v-model="phone" placeholder="请输入账号"
                                placeholder-class="placeholder" />
                        </view>
                        <view class="input-item">
                            <image class="input-icon" src="/static/images/icon_pw.png" mode="aspectFit"></image>
                            <input class="input-field" :password="isPassword" type="text" v-model="password"
                                placeholder="请输入密码" placeholder-class="placeholder" />
                            <view class="password-toggle" @click="isPassword = !isPassword">
                                <uni-icons type="eye-filled" color="#667eea" v-if="!isPassword" />
                                <uni-icons type="eye-slash-filled" color="#667eea" v-else />
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 手机验证码登录 -->
                <view class="form-content" v-if="tabIndex == 1">
                    <view class="input-group">
                        <view class="input-item">
                            <image class="input-icon" src="/static/images/icon_phone.png" mode="aspectFit"></image>
                            <input class="input-field" type="number" v-model="mobile" placeholder="请输入手机号"
                                placeholder-class="placeholder" maxlength="11" />
                        </view>
                        <view class="input-item code-input">
                            <image class="input-icon" src="/static/images/icon_code.png" mode="aspectFit"></image>
                            <input class="input-field" type="number" v-model="code" placeholder="请输入验证码"
                                placeholder-class="placeholder" maxlength="6" />
                            <view class="code-btn" @click="getCode" :class="getCodeTime > 0 ? 'code-disabled' : ''">
                                <text class="code-text">
                                    {{ getCodeTime > 0 ? `${getCodeTime}s后重试` : '获取验证码' }}
                                </text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 登录按钮 -->
            <view class="login-btn-section">
                <view class="login-btn" :class="{ disabled: loading }" @click="login">
                    <span v-if="loading" class="btn-loading"></span>
                    <text class="login-btn-text">登录</text>
                </view>
            </view>

            <!-- 用户协议 -->
            <view class="agreement-section">
                <label class="agreement-checkbox">
                    <checkbox-group @change="onUserProtocalChange">
                        <checkbox value="userProtocal" :checked="userProtocalCheck" />
                    </checkbox-group>
                    <text class="agreement-text">
                        已阅读并同意
                        <navigator url="" class="agreement-link">
                            《用户隐私协议》
                        </navigator>
                    </text>
                </label>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import uniReq from '../../api/uniReq'
import { setToken } from '@/utils/auth'

// 响应式数据
const tabIndex = ref(0) // 当前选中的tab索引
const phone = ref('') // 用户名
const password = ref('') // 密码
const mobile = ref('') // 手机号
const code = ref('') // 验证码
const isPassword = ref(true) // 密码是否可见
const getCodeTime = ref(0) // 验证码倒计时
const userProtocalCheck = ref(false) // 用户协议是否勾选

const loading = ref(false) // 登录按钮loading状态

// 切换登录方式
const tab = (index) => {
    tabIndex.value = index
    // 清空表单数据
    password.value = ''
    mobile.value = ''
    code.value = ''
    phone.value = ''
}

// 获取验证码
const getCode = () => {
    if (!phone.value) {
        uni.showToast({
            title: '请输入手机号',
            icon: 'none'
        })
        return
    }

    if (!/^1[3-9]\d{9}$/.test(mobile.value)) {
        uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
        })
        return
    }

    // 模拟发送验证码
    uni.showToast({
        title: '验证码已发送',
        icon: 'success'
    })

    // 开始倒计时
    getCodeTime.value = 60
    const timer = setInterval(() => {
        getCodeTime.value--
        if (getCodeTime.value <= 0) {
            clearInterval(timer)
        }
    }, 1000)
}

// 倒计时结束
const endCounter = () => {
    getCodeTime.value = 0
}

// 用户协议勾选状态改变
const onUserProtocalChange = (e) => {
    userProtocalCheck.value = e.detail.value.length > 0
}

// 登录函数
const login = async () => {
    if (loading.value) return        // 防止重复点
    loading.value = true
    // 检查用户协议
    if (!userProtocalCheck.value) {
        uni.showToast({
            title: '请先阅读并同意用户协议',
            icon: 'none'
        })
        return
    }

    if (tabIndex.value === 0) {
        // 账号密码登录
        if (!phone.value) {
            uni.showToast({
                title: '请输入账号',
                icon: 'none'
            })
            return
        }
        if (!password.value) {
            uni.showToast({
                title: '请输入密码',
                icon: 'none'
            })
            return
        }
        try {
            let res = await uniReq({
                url: '/v2/login/password',
                method: 'POST',
                data: {
                    mobile: phone.value,
                    password: password.value
                }
            })
            console.log('登录响应:', res);
            // 登录成功
            if (res.code === 0 || res.code === 200) {
                setToken(res.data.token)
                uni.setStorageSync('name', res.data.name)
                uni.setStorageSync('phone', res.data.phone)
                uni.showToast({
                    title: '登录成功',
                    icon: 'success'
                })
                // 跳转到首页
                setTimeout(() => {
                    uni.switchTab({
                        url: '/pages/video/live/index'
                    })
                }, 500) 
            }else{
                uni.showToast({
                    title: res.message || '登录失败，请稍后重试',
                    icon: 'none'
                })
                return
            }
        } catch (error) {
            console.log('登录错误详情:', error);
            uni.showToast({
                title: typeof error === 'string' ? error : (error.message || JSON.stringify(error) || '登录失败，请稍后重试'),
                icon: 'none'
            })
            return
        }
        try {
            let res = await uniReq({
                url: '/auth/login',
                method: 'POST',
                data: {
                    mobile: mobile.value,
                    code: code.value
                }
            })
            // 登录成功
            if (res.code === 0) {
                setToken(res.data.token)
                uni.showToast({
                    title: '登录成功',
                    icon: 'success'
                })
                // 跳转到首页
                setTimeout(() => {
                    uni.switchTab({
                        url: '/pages/video/live/index'
                    })
                }, 500)
            }else{
                uni.showToast({
                    title: res.message,
                    icon: 'none'
                })
                return
            }
        } catch (error) {
            uni.showToast({
                title: error,
                icon: 'none'
            })
            return
        } finally {
            loading.value = false
        }
    }
}
// 页面加载时初始化
onMounted(() => {
    console.log('登录页面加载完成')
})
</script>

<style lang="scss" scoped>
.login-container {
    height: 95vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40rpx;
    position: relative;
    overflow: hidden;
}

.background-decorations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.decoration-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
    width: 200rpx;
    height: 200rpx;
    top: 10%;
    left: 10%;
    animation: float 6s ease-in-out infinite;
}

.circle-2 {
    width: 150rpx;
    height: 150rpx;
    top: 60%;
    right: 15%;
    animation: float 8s ease-in-out infinite 2s;
}

.circle-3 {
    width: 100rpx;
    height: 100rpx;
    bottom: 20%;
    left: 20%;
    animation: float 5s ease-in-out infinite 1s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20rpx) scale(1.05);
    }
}

.login-card {
    background: #fff;
    backdrop-filter: blur(20rpx);
    border-radius: 24rpx;
    padding: 60rpx 50rpx;
    width: 100%;
    max-width: 600rpx;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
    border: 1rpx solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}

.logo-section {
    text-align: center;
    margin-bottom: 60rpx;
}

.logo {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 20rpx;
}

.welcome-text {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    display: block;
}

.tab-section {
    display: flex;
    background: #f8f9fa;
    border-radius: 12rpx;
    padding: 4rpx;
    margin-bottom: 50rpx;
    position: relative;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8rpx;
}

.tab-active {
    background: #fff;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.tab-text {
    font-size: 28rpx;
    font-weight: 500;
    color: #666;
    transition: color 0.3s ease;
}

.tab-active .tab-text {
    color: #667eea;
    font-weight: 600;
}

.tab-indicator {
    position: absolute;
    bottom: -4rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 4rpx;
    background: #667eea;
    border-radius: 2rpx;
}

.form-section {
    margin-bottom: 50rpx;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
}

.input-item {
    position: relative;
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 12rpx;
    padding: 24rpx;
    transition: all 0.3s ease;
    border: 2rpx solid transparent;
}

.input-item:focus-within {
    border-color: #667eea;
    background: #fff;
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.1);
}

.input-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 20rpx;
    opacity: 0.6;
}

.input-field {
    flex: 1;
    font-size: 28rpx;
    color: #333;
    background: transparent;
    border: none;
    outline: none;
}

.placeholder {
    color: #999;
    font-size: 28rpx;
}

.password-toggle {
    padding: 8rpx 16rpx;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 6rpx;
    cursor: pointer;
    transition: all 0.3s ease;
}

.password-toggle:hover {
    background: rgba(102, 126, 234, 0.2);
}

.toggle-text {
    font-size: 24rpx;
    color: #667eea;
    font-weight: 500;
}

.code-input {
    position: relative;
}

.code-btn {
    padding: 16rpx 24rpx;
    background: #667eea;
    border-radius: 8rpx;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 160rpx;
    text-align: center;
}

.code-btn:active {
    transform: scale(0.98);
}

.code-disabled {
    background: #ccc !important;
    cursor: not-allowed;
}

.code-text {
    font-size: 24rpx;
    color: #fff;
    font-weight: 500;
}

.login-btn-section {
    margin-bottom: 40rpx;
}

.login-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12rpx;
    padding: 28rpx;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
}

.login-btn:disabled {
    background: #ccc !important;
    cursor: not-allowed;
}

.login-btn:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
}

/* 转圈圈 */
.btn-loading {
    display: inline-block;
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
    border: 3rpx solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.login-btn-text {
    font-size: 32rpx;
    color: #fff;
    font-weight: 600;
}

.agreement-section {
    text-align: center;
}

.agreement-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.agreement-text {
    font-size: 24rpx;
    color: #666;
    margin-left: 10rpx;
}

.agreement-link {
    color: #667eea;
    text-decoration: none;
}

.agreement-link:active {
    opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
    .login-container {
        padding: 20rpx;
    }

    .login-card {
        padding: 40rpx 30rpx;
    }

    .logo {
        width: 100rpx;
        height: 100rpx;
    }

    .welcome-text {
        font-size: 32rpx;
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    .login-card {
        background: rgba(30, 30, 30, 0.95);
    }

    .welcome-text,
    .tab-text,
    .input-field,
    .agreement-text {
        color: #fff;
    }

    .tab-section {
        background: rgba(255, 255, 255, 0.1);
    }

    .input-item {
        background: rgba(255, 255, 255, 0.1);
    }

    .placeholder {
        color: #aaa;
    }
}
</style>